<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">车辆管理</span>
  </div>
  <!-- 新增车辆弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"  style="width:1000px;padding:40px;" :before-close="handleClose" >
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车牌号">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.license" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆名称">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆品牌">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.brand"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆型号" >
            <el-select placeholder="请选择" v-model="saveVehicleForm.model" >
              <el-option label="小轿车" value="10"></el-option>
              <el-option label="中大型轿车" value="20"></el-option>
              <el-option label="SUV" value="30"></el-option>
              <el-option label="跑车" value="40"></el-option>
              <el-option label="皮卡" value="50"></el-option>
              <el-option label="面包" value="60"></el-option>
              <el-option label="公交" value="70"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆类型" >
            <el-select placeholder="请选择" v-model="saveVehicleForm.type">
              <el-option label="电车" value="10"></el-option>
              <el-option label="油车" value="20"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆挡位">
            <el-select placeholder="请选择" v-model="saveVehicleForm.gears" >
              <el-option label="自动挡" value="10"></el-option>
              <el-option label="手动挡" value="20"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车龄">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.age"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="座位数量">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.seatNumber" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆排量">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.displacement" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆颜色">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.color" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="租赁价格/日">
            <el-input placeholder="请输入内容"  v-model="saveVehicleForm.price"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属网点">
            <el-select placeholder="请选择" v-model="saveVehicleForm.outletsId" @click="loadOutlets( )" >
              <el-option v-for="outlet in outletsArr" :label=outlet.stationName :value=outlet.id></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="所属套餐">
            <el-select placeholder="请选择" v-model="saveVehicleForm.comboId" >
              <el-option v-for="combo in vehicleComboArr"  :label=combo.name :value=combo.id></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆状态">
            <el-select placeholder="请选择" v-model="saveVehicleForm.status" >
              <el-option label="空闲" value="1"></el-option>
              <el-option label="占用" value="2"></el-option>
              <el-option label="套餐车" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆图片">

              <el-upload
                  v-model:file-list="fileList"
                  action="http://localhost:8080/v1/file/upload"
                  name="file"
                  limit="1"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
              >
                <el-icon>
                  <Plus/>
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisibleImg">
                <img w-full :src="dialogImageUrl"/>
              </el-dialog>

          </el-form-item>
          <el-dialog>
            <img w-full />
          </el-dialog>
        </el-col>
        <el-col :span="25">
          <el-form-item label="备注">
            <textarea placeholder="请输入" style="width: 430px;height: 140px;" v-model="saveVehicleForm.remark" ></textarea>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveVehicle">确定</el-button>
    </template>
  </el-dialog>
  <!-- 车辆详情窗口 -->
  <el-dialog :title="dialogTitle1" v-model="dialogVisible1"  style="width:1000px;padding:40px;" :before-close="handleClose" class="xiangq">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车牌号" >
            <el-input  :model-value="saveVehicleForm.license"  ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆名称" >
            <el-input :model-value="saveVehicleForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆品牌" >
            <el-input :model-value="saveVehicleForm.brand"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆型号"  >
            <el-input :model-value="appmodelFormatter1(saveVehicleForm.model)" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆类型" >
            <el-input :model-value="appTypeFormatter1(saveVehicleForm.type)" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆挡位">
            <el-input :model-value="appGearsFormatter1(saveVehicleForm.gears)" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车龄">
            <el-input :model-value="saveVehicleForm.age"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="座位数量">
            <el-input :model-value="saveVehicleForm.seatNumber" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆排量">
            <el-input :model-value="saveVehicleForm.displacement" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆颜色">
            <el-input :model-value="saveVehicleForm.color" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="租赁价格">
            <el-input :model-value="saveVehicleForm.price" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属网点">
            <el-input :model-value="outlets1" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="所属套餐">
            <el-input :model-value=" saveVehicleComboForm.name" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆状态">
            <el-input :model-value="appStatusFormatter1(saveVehicleForm.status)" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="25">
          <el-form-item label="备注">
            <textarea  style="width: 900px;height: 140px;" v-text="saveVehicleForm.remark" ></textarea>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
  <!-- 车辆搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="车辆名称">
        <el-input placeholder="请输入内容" v-model="searchVehicleForm.name" style="width:220px;" ></el-input>
      </el-form-item>
      <el-form-item label="车牌号" style="width:290px;">
        <el-input placeholder="请输入内容" v-model="searchVehicleForm.license" style="width:220px;"  ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resteSearch">重置</el-button>
        <el-button type="primary" @click="loadVechicle">查询</el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button @click="visible2()" type="primary">新建车辆</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 车辆列表 -->
  <el-card style="margin:20px;">
    <el-table :data="vehicleArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column  label="车辆图片" align="center">
        <template #default="scope">
          <el-image :src="`http://localhost:8080/${scope.row.image}`" alt="车辆图片" style="width: 160px;height: 150px" fit="contain" ></el-image>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="车辆名称" align="center"/>
      <el-table-column prop="license" label="车辆名称" align="center"/>
      <el-table-column prop="price" label="租赁价格/日" align="center"/>
      <el-table-column prop="brand" label="车辆品牌" align="center"/>
      <el-table-column prop="status" label="车辆状态" align="center" :formatter="appStatusFormatter" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small"  @click="editVehicle1(scope.row.id)">查看详情</el-button> <br>
          <el-button link type="primary" size="small"  @click="editVehicle(scope.row.id)">编辑</el-button> <br>
          <el-button link type="primary" size="small"  @click="deleteVehicle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination   layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="[5, 10, 15, 20]"
                     v-model:current-page="currentPage"
                     v-model:page-size="currentSize"
                     v-model:total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
  </el-card>

</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import {ElMessage} from "element-plus";
import axios from "axios";
//控制新增和修改窗口的名称和显示
const dialogVisible = ref(false);
const dialogTitle = ref('新增车辆');
//控制车辆详情窗口的名称和显示
const dialogVisible1 = ref(false);
const dialogTitle1 = ref('车辆详情');

//保存查询到的车辆信息
const vehicleArr=ref([]);
const searchVehicleForm=ref({name:'',license:''});
const loadVechicle=()=>{
  searchVehicleForm.value.pageSize = currentSize.value;
  searchVehicleForm.value.pageNum = currentPage.value;
  let data=qs.stringify(searchVehicleForm.value);
  axios.get(BASE_URL+'/v1/vehicle/select?'+data).then((response)=>{
    if(response.data.code==2000){
      vehicleArr.value=response.data.data.list;
      total.value = response.data.data.total;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//保存查询到的套餐信息
const vehicleComboArr=ref([]);
const searchVehicleComboForm=ref({name:''});
const loadVechicleCombo=()=>{
  let data=qs.stringify(searchVehicleComboForm.value);
  axios.get(BASE_URL+'/v1/combo/select?'+data).then((response)=>{
    if(response.data.code==2000){
      vehicleComboArr.value=response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
// 查询网点信息
const outletsArr=ref([]);
const outlets1=ref({stationName:""})
const loadOutlets=(id)=>{
  let data=qs.stringify(id);
  axios.get(BASE_URL+"/v1/vehicle/selectStation?id="+data).then((response)=>{
    if(response.data.code==2000){
      outletsArr.value=response.data.data;
      outlets1.value=outletsArr.value[0].stationName;
      console.log(outlets1.value)
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//使车辆分页

//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(5);
//定义变量保存数据总条目数
const total = ref(100);
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  console.log('每页展示' + val + '条数据');
  loadVechicle();
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  console.log('当前的页数为：' + val);
  loadVechicle();
}

//查看详细车辆信息
const editVehicle1=(id)=>{
  dialogVisible1.value=true;
  axios.get(BASE_URL+"/v1/vehicle/select?id="+id).then((response)=>{
    if(response.data.code==2000){
      saveVehicleForm.value=response.data.data.list[0];
      if(saveVehicleForm.value.comboId != null){
        appComboFormatter(saveVehicleForm.value.comboId)
      }
      loadVechicle();
      loadOutlets(saveVehicleForm.value.outletsId);
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
//重置搜索信息
const resteSearch=()=>{
  searchVehicleForm.value={};
  loadVechicle();

}
onMounted(()=>{
  loadVechicle();//一进入页面就加载车辆
  loadVechicleCombo();
  value1.value="";
})

//新增车辆信息
const saveVehicleForm=ref({
  license:'',
  name:'',
  brand:'',
  model:'',
  type:'',
  gears:'',
  age:'',
  seatNumber:'',
  displacement:'',
  status:'',
  color:'',
  outletsId:'',
  remark:'',
  image:'',
  comboId:'',
  price:''
})
const visible2=()=>{
  dialogVisible.value=true;
}
const saveVehicle=()=>{

  console.log("value2"+value2.value)
  if(value1.value==""){
    //新增车辆
    console.log("aaaa")
    if(fileList.value.length!=0){
      saveVehicleForm.value.image = fileList.value[0].response.data;
    }else {
      saveVehicleForm.value.image=null;
    }
  }else if(value1.value!=""){
    //编辑车辆
    console.log("bbbb")
    if(value2.value!=true){
      console.log("bbbb1"+fileList1.value[0].url)
      saveVehicleForm.value.image=fileList1.value[0].url;
    }else{
      console.log("bbbb2"+fileList.value[0].response.data)
      saveVehicleForm.value.image = fileList.value[0].response.data;
    }
  }
  console.log("车辆图片"+saveVehicleForm.value.image)
  let data=qs.stringify(saveVehicleForm.value);
  axios.post(BASE_URL+'/v1/vehicle/save',data).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success('保存成功');
      dialogVisible.value=false;
      saveVehicleForm.value={};
      fileList.value=[];
      fileList1.value=[];
      value2.value=false
      loadVechicle();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
const handleClose=()=>{
  if(confirm('确认关闭本窗口吗？')){
    dialogVisible.value=false;
    saveVehicleForm.value={};
    dialogVisible1.value=false;
    fileList.value=[];
    value2.value=false
    saveVehicleComboForm.value={};
    value1.value=""
  }
}

//上传图片01
const fileList1=ref([])
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisibleImg = ref(false);
const value2=ref(false);
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //得到要删除的图片路径，uploadFile就是要上传的图片文件对象
  console.log("图片路径"+fileList.value)
  let imgUrl="";
  if(fileList.value.length!=0){
    imgUrl=uploadFile.response.data;
  }else {
    imgUrl=imageUrl;
  }
  //给后端发请求，删除图片
  axios.post(BASE_URL+"/v1/file/remove?imgUrl="+imgUrl).then((response)=>{
    if(response.data.code==2000){
      fileList.value=[];
      imageUrl="";
      value2.value=true;
      console.log("value2"+value2.value)
      ElMessage.success("删除成功");

    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
const handlePictureCardPreview = (uploadFile) => {
  dialogVisibleImg.value = true;
  console.log(uploadFile);
}

let imageUrl="";
const value1=ref();
//修改车辆信息
const editVehicle=(id)=>{
  dialogTitle.value="编辑车辆";
  dialogVisible.value=true;
  axios.get(BASE_URL+"/v1/vehicle/select?id="+id).then((response)=>{
    if(response.data.code==2000){
      saveVehicleForm.value=response.data.data.list[0];
      imageUrl = saveVehicleForm.value.image;
      if(imageUrl!=null){
        let newFile = {
          name: 'image.jpg', // 可以自定义文件名
          url: BASE_URL+imageUrl
        };
        let newFile1 = {
          name: 'image.jpg', // 可以自定义文件名
          url:imageUrl
        };
        value1.value=saveVehicleForm.value.id;
        fileList.value.push(newFile);
        fileList1.value.push(newFile1);
        console.log(fileList.value[0])
      }
      loadVechicle();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
//删除车辆
const deleteVehicle=(id)=>{
  if(confirm('您确认要删除吗?')){
    axios.post(BASE_URL+"/v1/vehicle/delete/"+id).then((response)=>{
      if(response.data.code==2000){
        ElMessage.success("删除成功!");
        loadVechicle();
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}


//进行状态码格式转换
const appmodelFormatter=(row,column,cellValue)=>{
  if(cellValue==10){
    cellValue='小轿车';
  }
  else if(cellValue==20){
    cellValue='中大型轿车';
  }
  else if(cellValue==30){
    cellValue='SUV';
  }
  else if(cellValue==40){
    cellValue='跑车';
  }
  else if(cellValue==50){
    cellValue='皮卡';
  }
  else if(cellValue==60){
    cellValue='面包车';
  }
  else if(cellValue==70){
    cellValue='大巴车';
  }
  return cellValue

}
const appTypeFormatter=(row,column,cellValue)=>{
  if(cellValue==10){
    cellValue='电车';
  }
  else if(cellValue==20) {
    cellValue = '油车';
  }
  return cellValue
}
const appGearsFormatter=(row,column,cellValue)=>{
  if(cellValue==10){
    cellValue='自动挡';
  }
  else if(cellValue==20) {
    cellValue = '手动挡';
  }
  return cellValue
}
const appStatusFormatter=(row,column,cellValue)=>{
  if(cellValue==1){
    cellValue='空闲';
  }
  else if(cellValue==2) {
    cellValue = '占用';
  }else if(cellValue==3) {
    cellValue = '套餐车';
  }
  return cellValue
}
const appmodelFormatter1=(cellValue)=>{
  if(cellValue==10){
    cellValue='小轿车';
  }
  else if(cellValue==20){
    cellValue='中大型轿车';
  }
  else if(cellValue==30){
    cellValue='SUV';
  }
  else if(cellValue==40){
    cellValue='跑车';
  }
  else if(cellValue==50){
    cellValue='皮卡';
  }
  else if(cellValue==60){
    cellValue='面包车';
  }
  else if(cellValue==70){
    cellValue='大巴车';
  }
  return cellValue

}
const appTypeFormatter1=(cellValue)=>{
  if(cellValue==10){
    cellValue='电车';
  }
  else if(cellValue==20) {
    cellValue = '油车';
  }
  return cellValue
}
const appGearsFormatter1=(cellValue)=>{
  if(cellValue==10){
    cellValue='自动挡';
  }
  else if(cellValue==20) {
    cellValue = '手动挡';
  }
  return cellValue
}
const appStatusFormatter1=(cellValue)=>{
  if(cellValue==1){
    cellValue='空闲';
  }
  else if(cellValue==2) {
    cellValue = '占用';
  }else if(cellValue==3) {
    cellValue = '套餐车';
  }
  return cellValue
}
const saveVehicleComboForm=ref({
  name:'',
})

const appComboFormatter=(cellValue)=>{

      axios.get(BASE_URL+"/v1/combo/select?id="+cellValue).then((response)=>{
        if(response.data.code==2000){
          saveVehicleComboForm.value=response.data.data[0];
        }else {
          ElMessage.error(response.data.msg);
        }
      })

}
</script>

<style scoped>
  .custom-disabled-input {
    background-color: #f0f0f0;
    color: #aa55ff;
  }
</style>